<template>
  <div class="score-progress bg-white rounded-lg pl-4">
    <div class="space-y-3 relative">
      <div class="progress-item flex flex-col relative pl-[120px] pb-[24px]">
        <span class="text-gray-600 text-sm w-[140px] mb-1 text-[#0FAD72]">
          团队平均值 {{ progressItems.averageSource }}{{progressItems.unit || ""}}
        </span>
        <!--  -->
        <div class="test-line flex-1 flex items-start">
          <div
            class="h-[3px] pingjun"
            :class="'bg-[#0FAD72]'"
            :style="{
              width: `${getProgressWidth(progressItems.averageSource)}%`,
            }"
          ></div>
        </div>
      </div>
      <!--  -->
      <div
        class="average-line absolute w-[1px] bg-[#0FAD72] z-10"
        :style="{
          left: `calc( 120px + (100% - 120px) * ${
            getProgressWidth(progressItems.averageSource) / 100.0
          })`,
          top: '12px',
          bottom: '5px',
        }"

      ></div>
      <div
        v-for="item in cp_list"
        :key="item.label"
        class="flex flex-row items-center justify-between relative pb-[18px]"
        @click="handleClick(item)"
      >
        <span :class="`text-sm w-[120px] text-[#595959]`">
          {{ item.label }}
        </span>
        <div class="flex-1 flex items-center">
          <div
            class="h-[14px] rounded-r-full"
            :class="
              parseFloat(item.value) >= parseFloat(progressItems.averageSource)
                ? 'bg-[#04CCA4]'
                : 'bg-[#FF6B3B]'
            "
            :style="{
              width: `${getProgressWidth(item.value)}%`,
            }"
          ></div>
          <span :class="`text-xs ml-2 text-nowrap ${
          parseFloat(item.value) >= parseFloat(progressItems.averageSource)
                ? 'text-[#04CCA4]'
                : 'text-[#FF6B3B]'
        }`">
           {{ formatValue(item.value, fixedNum, item.unit === '%') }}
            {{ item.unit || "" }} </span
          >
        </div>
      </div>


    </div>
    <div v-if="needCollapse" class="flex flex-row gap-[2px] items-center justify-center w-full text-yxt-blue text-sm" @click="showAllData = !showAllData">
      {{ showAllData ? '收起' : '展开'}}
      <van-icon :name="showAllData ? 'arrow-up' : 'arrow-down'" size="12"></van-icon>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, ref } from "vue";
import { formatValue } from "@/utils/num";

const props = defineProps({
  progressItems: {
    type: Object,
    required: true,
    default: () => ({
      list: [],
      averageSource: 0,
      total: 0
    })
  },
  totalScore: {
    type: Number
  },

  fixedNum: {
    type: Number,
    default: () => 0
  }
});

const unit = computed(() => {
  const tItems = props.progressItems.list;
  if (tItems.length  > 0) {

  }
});

const maxNum = 3;
const needCollapse = computed(() => props.progressItems.list.length > maxNum);
const showAllData = ref(false);
const cp_list = computed(() => {
  if (showAllData.value) return props.progressItems.list;
  return props.progressItems.list.slice(0,maxNum);
});

const emits = defineEmits(["click"]);

const maxScore = computed(() => {
  return Math.max(...props.progressItems.list.map((item) => item.value));
});

// 计算进度条宽度
const getProgressWidth = (value) => {
  // 将值按照50%为基准进行缩放
  if (value === 0) {
    return 0;
  }
  if (!maxScore.value) {
    return 0;
  }
  return (value / maxScore.value) * 60;
};

const handleClick = (item) => {
  console.log("handleClick: ", item);
  emits("click", item);
};
</script>

<style lang="less" scoped>
.score-progress {
  .average-line {
    top: 0;
    bottom: 0;
  }
}
</style>
